<template>
  <div class="index-container">
    <el-form :inline="true" >
      <el-form-item label="关键字">
        <el-input v-model="queryForm.key" placeholder="输入关键字" />
      </el-form-item>
      <el-form-item label="校区">
        <el-select v-model="queryForm.schoolId" clearable placeholder="请选择">
          <el-option
            v-for="item in schoolData"
            :disabled="item.status != 2"
            :key="item.schoolId"
            :label="item.schoolName"
            :value="item.schoolId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          type="primary" @click="initList">
          查询
        </el-button>
        <el-button
          icon="el-icon-plus"
          type="primary" @click="add(true)">
          新增话题
        </el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list">
      <el-table-column prop="imgUrl" label="图片">
        <template #default="{ row }">
           <viewer>
            <img
            :src="row.imgUrl"
            style="width:60px;"
          ></img>
          </viewer>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="名称" prop="name"/>
      <el-table-column show-overflow-tooltip label="学校" prop="schoolId" :formatter="formatSchoolID" />
      <el-table-column show-overflow-tooltip label="描述" prop="desc"/>
      <el-table-column label="操作" width="220px">
        <template #default="{ row }">
          <el-button type="text" @click="add(row)">编辑</el-button>
          <el-button type="text" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <TopicForm ref="CreateTopicForm" @onOk="fetchData"></TopicForm>
  </div>
</template>

<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted,
} from 'vue'
import { Message,MessageBox } from 'element-ui'
import store from '@/store'
import {
  getTopicPage,topicDel
} from '@/api/topic/topic_api'
import TopicForm from './topic_form'
export default {
  name: 'topicList',
  components: {
    TopicForm
  },
  setup(props, { emit }) {
    const Interface = reactive({
      async fetchData(){
        const {data} = await getTopicPage(query.queryForm)
        query.list = data && Array.isArray(data.topics)?data.topics:[]
      },
      formatSchoolID(row, column){
        if(row.schoolId === 0) return '全学校通用'
        return query.schoolData.find(v=>v.schoolId == row.schoolId).schoolName
      },
      initList(){
        Interface.fetchData()
      },
      initQiniu(){
        let params = {type:10}
        store.dispatch('baseStore/setQiniuToken',params)
      },
      add(row){
        CreateTopicForm.value.openForm(row)
      },
      del(row){
        MessageBox.confirm('删除无法恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let params = {id:row.id}
          const {code} = await topicDel(params)
          if(code === 0){
            Interface.initList()
          }
        }).catch(() => {});
      }
    })
    const query = reactive({
      schoolData:computed(() => store.getters['baseStore/schoolData']),
      list:[],
      queryForm: {
        schoolId:'',
        key:''
      }
    })
    const CreateTopicForm = ref(null)
    onMounted(() => {
      Interface.initList()
      Interface.initQiniu()
    })
    return {
      CreateTopicForm,
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
} 
</script> 
 